<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--<link rel="stylesheet" type="text/css" href="css/main.css" />-->
		<!--<link rel="stylesheet" type="text/css" href="css/com.css" />-->
		<!--<link rel="stylesheet" type="text/css" href="css/login.css" />-->

		<script src="js/jquery-1.11.3.js"></script>
		<script src="js/jquery.min.js"></script>
		<title>聪付注册页面</title>
		<style>
			@charset "utf-8";
			* {
				word-wrap: break-word;
			}
			
			html {
				-webkit-text-size-adjust: none;
			}
			
			
			
			body {
				font: normal 14px/24px "微软雅黑";
			}
			/*登录注册的头部*/
			
			#header {
				
				height: 111px;
			}
			.header_inner{width: 1181px; margin: auto;}
			.header_left {
				/*width: 525px;*/
				float: left;
			}
			
			.header_left img {
				float: right;
				margin-top: 21px;
			}
			
			.header_center {
				color: #525898;
				font-size: 24px;
				border-bottom: 1px solid #CCCCCC;
				float: left;
				margin-left: 59px;
				margin-top: 32px;
			}
			
			.header_center h3 {
				/*border-bottom: 1px solid #CCCCCC;*/
				background: url(img/login-01.png ) no-repeat bottom;
				
				line-height: 38px;
			}
			
			.header_right {
				/*width: 417px;*/
				float: left;
				margin-top: 27px;
				margin-left: 700px;
			}
			/*注册========================================*/
			
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			body {
				font: 12px/1.5 Tahoma;
			}
			
			#background {
				height: 692px;
				background: url(img/login-background.png) no-repeat;
				background-size: cover;
				overflow: hidden;
			}
			
			#wrap {
				width: 600px;
				height: 470px;
				margin: 150px auto;
			}
			
			#tab {
				height: 60px;
				overflow: hidden;
				zoom: 1;
				background: #eeeeee;
				border: 3px solid #ccc;
			}
			
			#tab li {
				float: left;
				color: #666666;
				width: 297px;
				height: 60px;
				cursor: pointer;
				line-height: 54px;
				text-align: center;
				font-size: 22px;
				font-family: "微软雅黑";
			}
			
			#tab li a{text-decoration: none; color: #000000;}
			/*#tab li.current {
				color: #000;
				background: #FFFFFF;
			}*/
			
			#content {
				border: 3px solid #CCCCCC;
				border-top-width: 0;
				width: 595px;
				height: 415px;
				background: #FFFFFF;
				position: relative;
			}
			
			#content ul {
				line-height: 25px;
				
				margin: 0 30px;
				padding: 10px 0;
			}
			/*表单的样式==========================================================*/
			
			.form {
				width: 344px;
				height: 303px;
				margin: auto;
			}
			
			.form p {
				display: block;
				float: left;
				font-size: 13px;
			}
			
			.phone_num {
				margin-top: 45px;
			}
			
			.phone_num,
			.password_1,
			.again_p,
			.submit_1 {
				width: 338px;
				height: 45px;
				margin-bottom: 8px;
			}
			
			.yanzheng {
				width: 180px;
				height: 45px;
				margin-bottom: 8px;
			}
			/*验证码*/
			#btnSendCode{width: 154px; height: 48px;}
			#btnSendCodes{width: 154px; height: 48px;  background: none;}
			/*#id{width:150px; height:45px; border: none;}*/
			
			.password_1 {}
			
			
			
			.OK {
				float: left;
				margin-left: 85px;
				margin-top: 8px;
			}
			
			.submit_1 {
				background: #FFFFFF;
			}
			/*底部图标*/
			
			.iconfont {
				height: 184px;
				overflow: hidden;
			}
			
			.iconfont .inner_icon {
				width: 1196px;
				margin: auto;
			}
			
			.iconfont dl {
				width: 300px;
				float: left;
				margin-top: 63px;
				margin-left: 73px;
			}
			
			.iconfont dl dt {
				float: left;
				margin-right: 10px;
			}
			
			.iconfont dl dd {
				float: left;
				line-height: 24px;
			}
			/*footer*/
#footer_wrap{height:119px; background: #dddddd; }
 .footer_inner{width: 1106px; margin: auto;}
  .left{float: left; /*margin: 25px  10px  0  411px; */  margin-top: 25px; }
  .center{ float: left; font-size: 14px;  margin-top: 49px; margin-left: 20px; }
  .right{ float:left; margin-top: 51px;  margin-left: 208px;}
  .right a{ color: #000000; text-decoration: none;}
			
			/*弹出*/
			.po_phone_num{display: none; color: #EC3E7D; position: absolute; right: -37px; top: 61px;}
			
			.po_password{display: none;color: #EC3E7D;position: absolute; right: -37px; top: 176px;}
			.po_again_p{display: none;color: #EC3E7D;position: absolute; right: -37px; top: 235px;}
			.form_act{display: none;color: #EC3E7D;}
			
		</style>
	</head>

	<body>
		<div id="header">
			<div class="header_inner">
			<div class="header_left"><img src="img/header.png"></div>

			<div class="header_center">
				<h3>可视温暖在身边</h3>
			</div>

			<div class="header_right">
				

				<img src="img/header2.png" alt="">
			</div>
</div>
		</div>
		<!-- html代码begin -->
		<div id="background">

			<div id="wrap">
				<ul id="tab">
					<li ><a href="personal-register.html">个人注册</a></li>
					<li  style="color: #000;
				background: #FFFFFF;"><a href="bussinessregister.html">商家注册</a></li>

				</ul>
				<div id="content">
				


					<!--商家注册-->
					<ul>
						<form class="form" action="bussiness-login.html">
							
							   <input type="text" id="phones" name="tel"   placeholder="手机号"  class="phone_num"/>  
                                  <input type="text" id="checkCode" name="checkcode" size="6"  class="yanzheng"  placeholder="验证码"/>  
                                    <input id="btnSendCodes" type="button" value="获取验证码" onclick="sendMessages()" />  
                         
							<input type="password" placeholder="登录密码" class="password_1" />
							<input type="password" placeholder="确认密码" class="again_p" name="password"/>

							<input type="checkbox" class="OK" />
							<p>同意《聪付服务协议》</p>
                          <input type="submit" value="下一步" class="submit_1"/>
<div class="po_phone_num">请输入正确的手机号码</div>
<div class="po_password">输入不正确，至少6个字符</div>
<div class="po_again_p">密码与确认密码不相符，请重新填写</div>
                   
							
						</form>
					</ul>

				</div>
			</div>
		</div>

		<!--三个图标的部分哦-->
		<!--底部图标-->
		<div class="iconfont">
			<div class="inner_icon">
				<dl>
					<dt><img src="img/login_icon1.png" alt=""></dt>
					<dd style="margin-right: 120px;">可视支付，余额随时看</dd>
					<dd>使用更安心</dd>
				</dl>

				<dl>
					<dt><img src="img/login_icon2.png" alt=""></dt>
					<dd style="margin-right: 120px;">数据分析，家人云查看</dd>
					<dd>温暖在身边</dd>
				</dl>
				<dl>
					<dt><img src="img/login_icon3.png" alt=""></dt>
					<dd style="margin-right: 120px;">商家入驻，审核优把关</dd>
					<dd>使用更安全</dd>
				</dl>
			</div>
		</div>
		<!--加载尾部的内容-->
		
		<!--footer-->
			<div id="footer_wrap">
			<div class="footer_inner">
				 <div class="left"><img src="img/footer.png" alt="" /></div>
			<div class="center">
				<p>聪付版权所有：版权所有2016沪ICP证888888号2016聪付 使用聪付前必读聪付协议</p>
			</div>
			<div class="right">
				<a href="servicecenter.html">帮助中心|</a>
				<a href="tip.html">提建议</a>
			</div>
			</div>
		</div>

		<!-- html代码end -->
		<!--<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
		<!--<script>
			$(function() {
				window.onload = function() {
					var $li = $('#tab li');
					var $ul = $('#content ul');

					$li.click(function() {
						var $this = $(this);
						var $t = $this.index();
						$li.removeClass();
						$this.addClass('current');
						
						$ul.css('display', 'none');
						
						$ul.eq($t).css('display', 'block');
					})
				}
			});
		</script>-->

	
		
		
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">  
/*-------------------------------------------*/  
var InterValObj; //timer变量，控制时间  
var count = 60; //间隔函数，1秒执行  
var curCount;//当前剩余秒数  
var code = ""; //验证码  
var codeLength = 6;//验证码长度  

//商家注册；
function sendMessages() {  
    curCount = count;  
    var phone=$("#phones").val();//手机号码  
    if(phone != ""){   
        //设置button效果，开始计时  
        $("#btnSendCodes").attr("disabled", "true");  
        $("#btnSendCodes").val("请在" + curCount + "秒内输入验证码");  
        InterValObj = window.setInterval(SetRemainTimes, 1000); //启动计时器，1秒执行一次  
    //向后台发送处理数据  
        $.ajax({  
            type: "POST", //用POST方式传输  
            dataType: "text", //数据格式:JSON  
            url: 'RegisterMessage.action', //目标地址  
            data: "phone=" + phone + "&code=" + code,  
            error: function (XMLHttpRequest, textStatus, errorThrown) { },  
            success: function (msg){ }  
        });  
    }else{  
        alert("手机号码不能为空！！！！！！");  
    }  
}  
//timer处理函数  
 function SetRemainTimes() {  
    if (curCount == 0) {                  
        window.clearInterval(InterValObj);//停止计时器  
        $("#btnSendCodes").removeAttr("disabled");//启用按钮  
        $("#btnSendCodes").val("重新发送验证码");  
        code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效      
    }  
    else {  
        curCount--;  
        $("#btnSendCodes").val("请在" + curCount + "秒内输入验证码");  
    }  
}   
</script>  



	</body>
<script>
	$(function(){
		var juddge01=juddge02=juddge03=juddge04 =juddge05= false;
		$(".phone_num").blur(function(){
			//alert(1)
			var $phone_num = $(".phone_num").val();
			var reg02 = /^1[3|4|5|7|8]\d{9}$/;//手机号
			
			if(reg02.test($phone_num)){
			
			console.log("邮箱或者手机号正确");
			
			$(".po_phone_num").css("display","none");
			
			juddge01 = true;
		}else{
			
			$(".po_phone_num").css("display","block");
			
			juddge01 = false;
		}
			
		})
		//验证密码
	$(".password_1").blur(function(){
	      //alert(ok)
		var $password_1 = $(".password_1").val();
		

      var reg03=/^\w{6,16}$/;
		
	
		
		if(reg03.test($password_1)){
			
			console.log("密码正确");
			
			juddge02 = true;
			
			$(".po_password").css("display","none");
		}else{
			
			$(".po_password").css("display","block");
			
			juddge02 = false;
		}
		
		
		})
		
//判断前后两次密码是否一致
	
$(".again_p").blur(function(){
		
		//console.log(1);//事件通过
		
		var $again_p  = $(".again_p").val();
		
		var reg04     = $(".password_1").val();
		
		if(reg04 !="" && reg04 == $again_p){
			
			console.log("密码与确认密码相符");
			
			juddge04 = true;
			
			$(".po_again_p").css("display","none");
		}else{
			
			$(".po_again_p").css("display","block");
			
			juddge04 = false;
		}
		
	})
	//判断是否符合注册条件，如果符合则注册，否则不能
	
		$(".submit_1").click(function(){

		//console.log(1);//点击事件成功
		//alert(1)
		
		//判断
		
//		if(juddge01 && juddge02 &&juddge03 &&$('input[type=checkbox]').is(':checked')){
//			
//			
//			var $phone_num = $(".phone_num").val();
//			
//			var $password  = $(".password").val();
//
//			$.ajax({
//				
//				url:"http://datainfo.duapp.com/shopdata/userinfo.php",
//				
//				type:"POST",
//				
//				data:{
//					status:"register",
//					userID:$phone_num,
//					
//					password:$password
//				},
//				success:function(res){
//					console.log(res);
//					switch(res){
//						case "0":alert("用户名重名");break;
//						case "1":alert("注册成功");window.location.href="successful.html";break;//注册成功跳转到登录页
//						case "2":alert("数据库报错");break;
//						default:alert(res);
//					}
//					
//				},
//				error:function(res){
//					console.log(2);
//				}
//				
//			})//ajax调用结束
//		}else{
//			alert("请认真填写");
//		}

	})
		
	})
</script>
</html>